<template>
    <div class="icon-container">
        <h1 class="row-title">普通引入</h1>
        <div class="row">
            <Xq-Icon icon="user-secret" />
            <Xq-Icon icon="bars" />
            <Xq-Icon icon="shield-halved" />
            <Xq-Icon icon="file" />
            <Xq-Icon icon="filter" />
            <Xq-Icon icon="gear" />
            <Xq-Icon icon="barcode" />
            <Xq-Icon icon="folder" />
            <Xq-Icon icon="folder-open" />
        </div>
        <h1 class="row-title">设置不同的大小</h1>
        <div class="row">
            <Xq-Icon icon="user-secret" size="2xs" />
            <Xq-Icon icon="bars" size="xs" />
            <Xq-Icon icon="shield-halved" size="sm" />
            <Xq-Icon icon="file" size="lg" />
            <Xq-Icon icon="filter" size="xl" />
            <Xq-Icon icon="gear" size="2xl" />
            <Xq-Icon icon="barcode" size="2x" />
            <Xq-Icon icon="folder" size="3x" />
            <Xq-Icon icon="folder-open" size="4x" />
        </div>
        <h1 class="row-title">旋转与翻转</h1>
        <div class="row">
            <Xq-Icon icon="user-secret" rotation="90" size="xl" />
            <Xq-Icon icon="bars" rotation="270" size="xl" />
            <Xq-Icon icon="shield-halved" rotation="180" size="xl" />
            <Xq-Icon icon="file" flip="horizontal" size="xl" />
            <Xq-Icon icon="filter" flip="vertical" size="xl" />
            <Xq-Icon icon="folder-open" flip="both" size="xl" />
        </div>
        <h1 class="row-title">动画效果</h1>
        <div class="row">
            <Xq-Icon icon="user-secret" size="xl" beat />
            <Xq-Icon icon="bars" size="xl" beat-fade />
            <Xq-Icon icon="shield-halved" size="xl" bounce />
            <Xq-Icon icon="file" size="xl" fade />
            <Xq-Icon icon="filter" size="xl" flip />
            <Xq-Icon icon="gear" size="xl" shake />
            <Xq-Icon icon="barcode" size="xl" spin />
            <Xq-Icon icon="folder" size="xl" spin spin-reverse />
            <Xq-Icon icon="folder-open" size="xl" spin-pulse />
        </div>
        <h1 class="row-title">添加自定义属性</h1>
        <div class="row">
            <Xq-Icon icon="user-secret" size="xl" type="primary" />
            <Xq-Icon icon="bars" size="xl" type="success" />
            <Xq-Icon icon="shield-halved" size="xl" type="info" />
            <Xq-Icon icon="file" size="xl" type="warning" />
            <Xq-Icon icon="filter" size="xl" type="danger" />
            <Xq-Icon icon="gear" size="xl" color="#e47412" />
            <Xq-Icon icon="barcode" size="xl" color="#7ec102" />
            <Xq-Icon icon="folder" size="xl" color="skyblue" />
            <Xq-Icon icon="folder-open" size="xl" color="rgba(122, 122, 122, .5)" />
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { onMounted } from "vue";
    import { useRoute } from "vue-router";
    const route = useRoute();
    // const test = (e)=> {
    //     console.log(e.msg);
    // }

    onMounted(()=> {
        console.log(route);
    })
</script>